<template>
  <div class="app-container">
    <div class="container">
      <!-- 头部 -->
      <div class="header">
        <!-- 报价型体型作业 -->
        <el-card class="headerBodily" :body-style="{ padding: '0px' }">
          <div class="headerLeft">
            <!-- 左侧 -->
            <div class="left" style="width: 50%">
              <!-- 标题 -->
              <h1 style="margin-bottom: 10px; font-size: 16px; margin-top: 10px">报价型体作业</h1>

              <!-- 品牌 -->
              <el-form-item label="品牌" style="font-size: 9px; height: 15px">
                <el-input style="width: 64px; height: 25px" />
              </el-form-item>

              <!-- 季度 -->
              <el-form-item label="季度" style="font-size: 9px; height: 15px">
                <el-input style="width: 64px; height: 25px" />
              </el-form-item>

              <!-- 型体 -->
              <el-form-item label="型体" style="font-size: 9px; height: 15px">
                <el-input style="width: 64px; height: 25px" />
              </el-form-item>

              <!-- 报价日期 -->
              <el-form-item label="报价日期" style="font-size: 9px; height: 5px; width: 300px">
                <el-date-picker type="monthrange" range-separator="-" start-placeholder="2021年/12/12" end-placeholder="2021年/12/12" />
              </el-form-item>
            </div>

            <!-- 右侧 -->
            <div class="rigtgh" style="width: 50%; display: flex; margin-left: -20px">
              <div style="width: 50%; margin-top: 30px">
                <!-- 单选框 -->
                <el-checkbox style="height: 20px !important" label="我的报价" size="default" />
                <el-checkbox style="height: 20px !important" label="所有报价" size="default" />
                <el-checkbox style="height: 20px !important" label="未核减" size="default" />
                <el-checkbox style="height: 20px !important" label="已核减" size="default" />
                <el-checkbox style="height: 20px !important" label="全部" size="default" />
              </div>
              <!-- 按钮 -->
              <div style="width: 50%; margin-left: 20px; display: flex; flex-wrap: wrap; margin-top: 20px">
                <el-button style="background-color: #f89027; margin-top: 20px; width: 50px" type="warning" size="small">查询</el-button>
                <el-button style="margin: 0; background-color: #f89027; margin-top: -25px; width: 50px" type="warning" size="small">'置空'</el-button>
                <el-button style="margin: 0; background-color: #f89027; margin-top: -25px; width: 50px" type="warning" size="small">取型体</el-button>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 头部中间 -->
        <div class="headerMiddle">
          <!-- 型体基本资料 -->
          <el-card class="headerPhysique" :body-style="{ padding: '0px' }">
            <div slot="header" style="display: flex">
              <h1 style="font-size: 16px; margin-top: 10px; margin-left: 10px; width: 113px">型体基本资料</h1>
              <div class="tab1">
                <el-table :data="tableData" height="65" style="width: 100%; margin-top: 31px">
                  <el-table-column style="color: red" align="center" prop="date" label="品牌" width="63" />
                  <el-table-column align="center" prop="name" label="季度" width="63" />
                  <el-table-column align="center" prop="name" label="鞋名" width="256" />
                  <el-table-column align="center" prop="name" label="客人型体" width="105" />
                  <el-table-column align="center" prop="name" label="冲刀编号" width="105" />
                  <el-table-column align="center" prop="name" label="大底编号" width="105" />
                  <el-table-column align="center" prop="name" label="楦头编号" width="105" />
                  <el-table-column align="center" prop="name" label="码段" width="63" />
                </el-table>
              </div>
            </div>
            <!-- card body -->
          </el-card>

          <!-- 报价检核作业 -->
          <el-card class="headerCheck" :body-style="{ padding: '0px' }">
            <div slot="header">
              <h1 style="font-size: 16px; margin-top: 10px; margin-left: 10px; margin-right: 43px; width: 113px">报价核减作业</h1>
            </div>
            <div style="height: 30px; margin-left: 10px; margin-top: 5px">
              <el-button style="background-color: #f89027; width: 87px" type="warning" size="small">打勾记录核减</el-button>
              <el-button style="background-color: #f89027; width: 87px; margin-left: 30px" type="warning" size="small">打勾取消核减</el-button>
              <el-button style="background-color: #f89027; width: 87px; margin-left: 30px" type="warning" size="small">参数设定</el-button>
            </div>
            <!-- card body -->
          </el-card>

          <!-- 报价资料作业 -->
          <el-card class="headerMaterial" :body-style="{ padding: '0px' }" style="position: relative">
            <div slot="header">
              <h1 style="font-size: 16px; margin-top: 10px; margin-left: 10px; margin-right: 43px; width: 113px">报价资料作业</h1>
            </div>

            <!-- 底部选择框 -->
            <div style="height: 30px; margin-left: 10px; margin-top: 5px; width: 100%; display: flex">
              <!-- 类型筛选 -->
              <el-form-item label="类型筛选" style="font-size: 9px; width: 120px; height: 30px">
                <el-select placeholder=" " class="m-2" size="small"> </el-select>
              </el-form-item>

              <!-- 项目类型 -->
              <el-form-item label="项目类型" style="font-size: 9px; width: 120px; height: 30px; margin-left: 20px">
                <el-select placeholder=" " class="m-2" size="small"> </el-select>
              </el-form-item>

              <!-- 币别 -->
              <el-form-item label="币别" style="font-size: 9px; width: 100px; height: 30px; margin-left: 20px">
                <el-select placeholder=" " class="m-2" size="small"> </el-select>
              </el-form-item>
            </div>

            <!-- 右侧按钮 -->
            <div style="width: 85px; height: 210px; position: absolute; right: 0; top: 0">
              <el-button style="background-color: #f89027; width: 56px; margin-left: 15px; margin-top: 5px" type="warning" size="small"
                >选中删除</el-button
              >
              <el-button style="background-color: #f89027; width: 56px; margin-left: 15px; margin-top: 10px" type="warning" size="small"
                >内容更新</el-button
              >
            </div>
            <!-- card body -->
          </el-card>
        </div>

        <!-- 报价项目明确 -->
        <el-card class="headerProject" :body-style="{ padding: '0px' }">
          <div slot="header">
            <h1 style="font-size: 16px; margin-top: 10px; margin-left: 10px; margin-right: 43px; width: 113px">报价项目明确</h1>
          </div>

          <!-- 中间汇率 -->
          <div style="width: 90%; height: 35px; margin-left: 12px; display: flex; margin-top: 10px">
            <el-form-item label="汇率" style="font-size: 9px; height: 15px">
              <el-input style="width: 64px; height: 25px" />
            </el-form-item>
            <el-button style="background-color: #f89027; width: 105px; margin-left: 30px" type="warning" size="small">更新报价项目</el-button>
          </div>

          <!-- 底部表格 -->
          <div class="tab1" style="width: 86%; height: 90px; margin-left: 12px; margin-top: 10px">
            <el-table class="table" :data="tableData" height="65" style="width: 100%; margin-top: 31px; margin-top: 0px">
              <el-table-column align="center" prop="name" label="名称" width="145" />
              <el-table-column align="center" prop="name" label="金额(USD)" width="125" />
            </el-table>
          </div>
          <!-- card body -->
        </el-card>
      </div>

      <!-- 主体 -->
      <div class="Main">
        <!-- 报价型体资料 -->
        <el-card class="MainProject" :body-style="{ padding: '0px' }">
          <!-- 标题 -->
          <div slot="header">
            <h1 style="font-size: 16px; margin-top: 10px; margin-left: 10px; margin-right: 43px; width: 113px">报价型体资料</h1>
          </div>

          <!-- 表格 -->
          <div class="tabe1" style="width: 100%">
            <el-table @cell-click="showDialog" :data="tableData1" ref="multipleTableRef" style="width: 100%; height: 100%" height="480">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="型体" width="52">
                <template #default="scope">{{ scope.row.date }} </template>
              </el-table-column>
              <el-table-column property="name" label="配色" width="63" />
              <el-table-column property="address" label="报价日期" show-overflow-tooltip width="90" />
              <el-table-column property="address" label="报价员" show-overflow-tooltip width="76" />
            </el-table>
          </div>

          <!-- 图片显示区域 -->
          <el-dialog v-model="visible" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
              <div class="my-header">
                <h4 :id="titleId" :class="titleClass">图片型体</h4>
                <el-button type="danger" @click="close"> 关闭 </el-button>
              </div>
            </template>
            <img src="" alt="" /> 图片区域
          </el-dialog>
          <!-- card body -->

          <!-- 底部 -->
          <div style="width: 100%; height: 40px">
            <el-button style="background-color: #f89027; width: 64px; margin-top: 10px; margin-left: 80%" type="warning" size="small">删除</el-button>
          </div>
        </el-card>

        <!-- 新增报价材料 -->
        <el-card class="MainNewly" :body-style="{ padding: '0px' }">
          <!-- 标题 -->
          <div slot="header">
            <h1 style="font-size: 16px; margin-top: 10px; margin-left: 10px; margin-right: 43px; width: 113px">新增报价材料</h1>
          </div>

          <!-- header表格 -->
          <div class="tabe2 footerBottom" style="width: 85.2%; height: 80px; margin: auto; margin-top: -1px">
            <el-table :data="tableData" height="80">
              <el-table-column align="center" prop="date" label="品牌" width="63" />
              <el-table-column align="center" prop="xuhao" label="序号" width="54" />
              <el-table-column align="center" prop="name" label="材料类型" width="95" />
              <el-table-column align="center" prop="name" label="部位" width="63" />
              <el-table-column align="center" prop="name" label="材料颜色" width="80" />
              <el-table-column align="center" prop="name" label="规格" width="97" />
              <el-table-column align="center" prop="name" label="单位" width="58" />
              <el-table-column align="center" prop="name" label="供应商" width="74" />
              <el-table-column align="center" prop="name" label="单耗" width="60" />
              <el-table-column align="center" prop="name" label="中耗" width="60" />
              <el-table-column align="center" label="项目类型" width="91">
                <template #default="scope">
                  <el-select v-model="value" placeholder=" " class="m-2" size="small" style="width: 100%">
                    <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item" />
                  </el-select>
                </template> </el-table-column
              >>
              <el-table-column align="center" prop="name" label="报价单耗" width="83" />
              <el-table-column align="center" prop="name" label="币别" width="71">
                <template #default="scope">
                  <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                </template> </el-table-column
              >>
              <el-table-column align="center" prop="name" label="材料单价" width="80" />
              <el-table-column align="center" prop="name" label="加工单价" width="87" />
            </el-table>
          </div>

          <!-- 报价型体资料 -->
          <div style="width: 100%; height: 465px; margin-top: 10px">
            <!-- 标题 -->
            <div>
              <h1 style="font-size: 16px; margin-left: 17px">报价型体资料</h1>
              <div style="height: 50px; width: 160px; margin-left: 89%">
                <el-button style="background-color: #e7e7e7; width: 60px; margin-top: 10px; color: #000000; border: none" type="info" size="small"
                  >插入</el-button
                >
                <el-button style="background-color: #f89027; width: 60px; margin-top: 10px" type="warning" size="small">'置空'</el-button>
              </div>
            </div>

            <!-- 表格 -->
            <div class="footerBottom" style="width: 100%; height: 280px">
              <el-table :data="tableData2" ref="multipleTableRef" style="width: 98.5%; height: 100%" height="468">
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" width="69">
                  <template #default="scope">{{ scope.row.date }} </template>
                </el-table-column>
                <el-table-column property="name" label="材料类型" width="80" />
                <el-table-column property="address" label="部位" show-overflow-tooltip width="67" />
                <el-table-column property="address" label="材料颜色" show-overflow-tooltip width="80" />
                <el-table-column property="address" label="材料名称" show-overflow-tooltip width="80" />
                <el-table-column property="address" label="规格" show-overflow-tooltip width="67" />
                <el-table-column property="address" label="单位" show-overflow-tooltip width="67" />
                <el-table-column property="address" label="供应商" show-overflow-tooltip width="76" />
                <el-table-column property="address" label="单耗" show-overflow-tooltip width="67" />
                <el-table-column property="address" label="中耗" show-overflow-tooltip width="67" />
                <el-table-column property="address" label="项目类型" show-overflow-tooltip width="80">
                  <template #default="scope">
                    <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                  </template> </el-table-column
                >>
                <el-table-column property="address" label="报价单耗" show-overflow-tooltip width="80" />
                <el-table-column property="address" label="币别" show-overflow-tooltip width="67">
                  <template #default="scope">
                    <el-select collapse-tags placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
                  </template> </el-table-column
                >>
                <el-table-column property="address" label="材料单价" show-overflow-tooltip width="80" />
                <el-table-column property="address" label="加工单价" show-overflow-tooltip width="80" />
                <el-table-column property="address" label="金额" show-overflow-tooltip width="67" />
                <el-table-column property="address" label="备注" show-overflow-tooltip width="60" />
              </el-table>
            </div>

            <!-- 底部 -->
            <div style="height: 60px; margin: auto; display: flex; margin-top: 10px; margin-left: 50px">
              <!-- 分类 -->
              <el-form-item label="分类" style="font-size: 9px; height: 15px">
                <el-input style="width: 103px; height: 25px" />
              </el-form-item>

              <!-- 项目类型 -->
              <el-form-item label="项目类型" style="font-size: 9px; width: 300px; height: 30px; margin-left: 20px">
                <el-select placeholder=" " class="m-2" size="small" style="width: 100%"> </el-select>
              </el-form-item>

              <!-- 材料名称 -->
              <el-form-item label="材料名称" style="font-size: 9px; height: 30px; margin-left: 20px">
                <el-select placeholder="10条/页" class="m-2" size="small" style="width: 638px"> </el-select>
              </el-form-item>
            </div>

            <!-- 分页器 -->
            <div class="bottom" style="width: 93%; height: 30px; display: flex; margin: auto; justify-content: space-between">
              <span style="font-size: 14px; columns: #000000; line-height: 30px">共658项数据</span>
              <div style="width: 500px">
                <!-- 分页器 -->
                <el-pagination small background layout="sizes, prev, pager, next, jumper" :total="50" @current-change="handleCurrentChange" />
              </div>
              <!-- 底部按钮 -->
              <div>
                <el-button style="background-color: #e7e7e7; width: 60px; color: #000000; border: none" type="info" size="small">保存</el-button>
                <el-button style="background-color: #f89027; width: 60px" type="warning" size="small">打印</el-button>
              </div>
            </div>
          </div>
          <!-- card body -->
        </el-card>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'Samplequotation'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
// 基本表格数据
const tableData = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    xuhao: 78
  }
]

// 单选框表格数据
const tableData1 = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]

const tableData2 = [
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '123',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
    // djsal:<el-dropdown><span class="el-dropdown-link"> Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
  }
]

// 分页器
const currentPage4 = ref(4)

const pageSize4 = ref(100)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}

const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

// 下拉框数据
type Option = {
  id: number
  label: string
  desc: string
}

const value = ref<Option>()

const options = ref([
  { id: 1, label: '面部', desc: '面部 - 230506' },
  { id: 2, label: 'Option B', desc: 'Option B - 230506' },
  { id: 3, label: 'Option C', desc: 'Option C - 230506' },
  { id: 4, label: 'Option A', desc: 'Option A - 230507' }
])

//弹框状态
const visible = ref(false)

const showDialog = () => {
  console.log(123456)
  visible.value = true
}
</script>

<style lang="less" scoped>
// 总体
.container {
  width: 100%;
  margin: auto;
  box-shadow: none;
  font-size: 16px;
}

// 头部
.header {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}

.headerLeft {
  width: 90%;
  height: 80%;
  margin: auto;
  display: flex;
}

// 中间
.headerMiddle {
  width: 990px;
  display: flex;
  flex-wrap: wrap;
}

// 报价体型
.headerBodily {
  width: 340px;
  height: 180px;
  box-shadow: none;
}

// 型体基本资料
.headerPhysique {
  width: 1013px;
  height: 103px;
  box-shadow: none;
  margin-left: 10px;
  box-shadow: none;
}

// 报价检核作业
.headerCheck {
  width: 49.2%;
  height: 76px;
  margin-left: 10px;
  margin-top: 10px;
  box-shadow: none;
}

//报价资料作业
.headerMaterial {
  width: 49.7%;
  height: 76px;
  margin-left: 10px;
  margin-top: 10px;
  box-shadow: none;
}

// 报价项目明确
.headerProject {
  height: 180px;
  box-shadow: none;
  margin-left: 10px;
  width: 320px;
}

// 主体
.Main {
  width: 100%;
  height: 600px;
  margin-top: 10px;
  display: flex;
}

// 左侧报价型体资料
.MainProject {
  width: 340px;
  height: 100%;
  box-shadow: none;
}

// 新增报价材料
.MainNewly {
  width: 1320px;
  height: 100%;
  margin-left: 10px;
  box-shadow: none;
}

// 选中单选框的背景色
:deep(.is-checked .el-checkbox__inner) {
  background-color: #f89027;
  border: 1px solid #f89027;
}

// 字体颜色
:deep(.is-checked .el-checkbox__label) {
  color: #191919;
}

:deep(.el-icon.el-input__icon.el-range__icon) {
  color: #f89027;
  position: absolute !important;
  right: 6px;
}

:depe(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
  color: red !important;
}

// 表格颜色
:deep(.el-table__body-wrapper) {
  font-size: 14px;
}

:deep(.el-table th.el-table__cell > .cell) {
  color: black;
}

:deep(.tab1 .el-table__body .el-table__row:first-child .el-table__cell) {
  padding: 0 !important;
}

:deep(.el-table__body-wrapper .el-table__body .el-table__row > td:first-child) {
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
}

:deep(.el-table__body-wrapper .el-table__body .el-table__row > td) {
  border-right: 1px solid #eaeaea;
}

// select选择框颜色
:deep(.el-icon svg) {
  color: #191919 !important;
}

:deep(.tabe1 .el-table__body-wrapper tr:first-child) {
  height: 40px;
}

:deep(.tabe2 .el-table__row) {
  border: 1px solid red;
  height: 37px;
}

:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  background-color: #f89027;
}

:deep(.footerBottom .el-input) {
  --el-input-focus-border: #fff;
  --el-input-transparent-border: 0 0 0 0px;
  --el-input-border-color: #fff;
  --el-input-hover-border: 0px !important;
  --el-input-hover-border-color: #fff;
  --el-input-focus-border-color: #fff;
  --el-input-clear-hover-color: #fff;
  box-shadow: 0 0 0 0px !important;
  --el-input-border: 0px;
}

:deep(.footerBottom .el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.footerBottom .el-select .el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 0px !important;
}

:deep(.footerBottom .el-select) {
  --el-select-border-color-hover: #fff;
}

// 弹框的样式
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

// 纵向滚动条
:deep(.el-scrollbar__bar.is-vertical .el-scrollbar__thumb) {
  opacity: 1;
  width: 6px; // 纵向滑块的宽度
  border-radius: 2px;
  background-color: var(--el-color-primary);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

.el-card {
  margin: 0;
  margin-right: 5px;
}
</style>
